<template>
  <a @click="exportWord()">
    <slot></slot>
  </a>
</template>

<script>
import Docxtemplater from 'docxtemplater'
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

let docx = require('docx-preview')
export default {
  name: 'Docx',
  props: {
    fileName: {
      type: String, // 输出文件名
      default: '',
    },
    fileTemplete: {
      type: String, // public下存放的word模板名称
      default: '',
    },
    exportData: {
      type: Object, // 导出的word数据
      default: () => { },
    },
  },
  methods: {
    preview() { },
    // 点击导出word
    exportWord() {
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(
        //   https://segmentfault.com/a/1190000041301193
        //   https://docxtemplater.com/docs/faq/#docxtemplater-in-a-vuejs-project
        // "https://docxtemplater.com/tag-example.docx",
        '/' + this.fileTemplete + '.docx',
        (error, content) => {
          // 抛出异常
          if (error) throw error
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content)
          //   console.log(zip)
          // 创建并加载docxtemplater实例对象
          let doc = new Docxtemplater()
          doc.loadZip(zip)
          // 设置模板变量的值
          doc.setData({
            ...this.exportData,
          })
          try {
            // 用模板变量的值替换所有模板变量
            doc.render()
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            //   console.log(JSON.stringify({ error: e }))
            throw error
          }
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          //   docx.renderAsync(out, this.$refs.file) // 渲染到页面
          //          var a = document.createElement("a"); //创建一个<a></a>标签
          //              a.href = URL.createObjectURL(out); // 将流文件写入a标签的href属性值
          // document.body.appendChild(a); // 将a标签追加到文档对象中
          //   return
          //   将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, this.fileName + '.docx')
        }
      )
    },
  },
}
</script>
<style scoped>
.word-box {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(2, 124, 141, 1);
  color: #fff;
  width: fit-content;
}

.word-box:hover {
  transition: 0.2s;
  opacity: 0.85;
}

.docWrap {
  width: 100%;
  overflow-x: auto;
}
</style>